<template>
  <detail-page
    :title="title"
    :loading="config.loading"
    :description="headerDescription"
    @close="close"
  >
    <abstract-form>
      <collapse-card header="通知内容">
        {{ info.content }}
      </collapse-card>
    </abstract-form>
  </detail-page>
</template>

<script>
import DetailPage from '@/views/_common/DetailPage'
import AbstractForm from '@/components/abstract/Form'
import CollapseCard from '@/components/CollapseCard'
import { closeCurrentPage } from '@/utils/route'
import { request } from '../../../api/request'
export default {
  name: 'MailDetail',

  components: {
    DetailPage,
    CollapseCard,
    AbstractForm
  },

  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },

  data: () => ({
    config: {
      loading: false
    },
    info: {
      title: null,
      addTime: null,
      content: null
    }
  }),

  computed: {
    headerDescription() {
      return [
        {
          label: '通知时间：',
          content: this.info.addTime
        }
      ]
    },

    title() {
      return this.info.title
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    //获取列表页的地址
    getTablePageUrl() {
      const url = this.$route.path
      const i = url.indexOf('/detail')
      const tablePageUrl = url.substring(0, i)
      return [...tablePageUrl].join('')
    },

    //关闭页面并跳转到列表页
    close() {
      return closeCurrentPage(this.getTablePageUrl())
    },

    init() {
      this.config.loading = true
      request('personal/mail/detail', { id: this.id }, (res) => {
        this.info = res.data
      }).finally(() => (this.config.loading = false))
    }
  }
}
</script>
